<template>
  <div class="home-first-content">
    <div class="home-first-content-col">
      <template v-if="componentChildren && componentChildren.children && componentChildren.children.length > 0">
        <a-page-header v-for="(item, index) in componentChildren.children" :key="index">
          <template v-if="item.data && item.data.length > 0">
            <template slot="title">
              <div class="home-first-content-page-header">
                <span>{{ item.name }}</span>
              </div>
            </template>

            <a-row>
              <a-col
                  v-for="list in item.data" :key="list.id"
                  :xxl="item.data.length / 24"
                  :xl="item.data.length / 24"
                  :lg="6"
                  :md="12"
                  :sm="12"
                  :xs="24"
                  @click="() => windowOpenUrl(list)"
              >
                <div class="home-first-content-col-page-col" :title="list.name">
                  <div>
                    <span>{{ list.name }}</span>
                  </div>
                </div>
              </a-col>
            </a-row>
          </template>
        </a-page-header>
      </template>
    </div>
  </div>
</template>

<script>
import {getLocalStorage, setLocalStorage} from "@/utils/localstore";
import {commonSysAdd} from "@/api/approve/approve";
import {message} from 'ant-design-vue';
import {getFirstMenuRouter} from "@/utils";

export default {
  name: "Portal",
  inject: {
    connectStore: {
      default: () => ({})
    }
  },
  computed: {
    componentChildren() {
      return this.connectStore.value.componentChildren;
    }
  },
  methods: {
    windowOpenUrl(url) {
      // if (url.id === 10200) {
      //   let bool = false 
      //   const roleListOptions = JSON.parse(getLocalStorage('roleListOptions'))
      //   roleListOptions && roleListOptions.length && roleListOptions.forEach(item=>{
      //     console.log(item.children)
      //     const a = item.children.some(item => item.id === 342)
      //     a && (bool = a)
      //   })
      //   if (getLocalStorage('roleId') !== '342' && !bool) return message.error('该用户无结转权限')
      // }
      // commonSysAdd({
      //   userId: getLocalStorage('userId'),
      //   pointId: url.id
      // }).then(() => {
      //   window.open(url.url)
      // })
      if (url.id === 10200) {
            let bool = false 
            const roleListOptions = JSON.parse(getLocalStorage('roleListOptions'))
            let appId, roleName, roleId
            roleListOptions && roleListOptions.length && roleListOptions.forEach(item=>{
              item.children && item.children.length && item.children.forEach(itemChild=>{
                if (itemChild.id === 342) {
                  appId = itemChild.appId,
                  roleName = itemChild.name,
                  roleId = itemChild.id
                  bool = true
                }
              })
            })
            if (!bool) {
                return message.error('该用户无结转权限')
            } else {
                commonSysAdd({
                    userId: getLocalStorage('userId'),
                    pointId: url.id
                }).then(() => {
                    setLocalStorage('appId', appId);
                    setLocalStorage('roleName', roleName);
                    setLocalStorage('roleId', roleId);
                    // this.$router.push({
                    //     path: url.url.replace('#', '')
                    // })
                    getFirstMenuRouter({
                      roleId,
                      state: 4
                    })
                })
            }
        } else {
            commonSysAdd({
                userId: getLocalStorage('userId'),
                pointId: url.id
            }).then(() => {
                window.open(url.url)
            })
        }  
    }
  }
}
</script>

<style scoped lang="less">
.home-first-content {
  .ant-page-header {
    padding: 0;
  }

  .ant-page-header-content {
    .ant-row {
      padding-top: 12px;
    }

    .home-first-content-col-page-col {
      display: flex;
      cursor: pointer;
      background: url('~@/assets/images/home/home-p.png') no-repeat;
      background-size: 100% 100%;
      color: white;
      margin-right: 20px;
      margin-bottom: 35px;
      border-radius: 2px;
      height: 88px;
      justify-content: space-between;
      padding: 10px;

      > div {
        display: flex;
        overflow: hidden;
        text-overflow: ellipsis;

        > span {
          text-align: left;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 22px;
          font-weight: bolder;
        }
      }
    }

    .home-first-content-col-page-col:hover {
      box-shadow: 0 0 6px #3296fa;
    }
  }
}
</style>
